<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		<meta name="format-detection" content="telephone=no"/>
		<meta name="format-detection" content="email=no"/>
		<title>阅读-书城</title>
		<link rel="stylesheet" href="dist/css/sm.min.css" />
		<link rel="stylesheet" href="dist/css/sm-extend.min.css" />
		<!--以上是SUI的css文件-->
		<link rel="stylesheet" href="css/xh-lxx-header-bar6.css" />
		<link rel="stylesheet" href="css/xh-lxx-top-tab2.css" />
		<link rel="stylesheet" href="css/xh-lxx-one-img1.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-title6.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-content14.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-content15.css" />
		<link rel="stylesheet" href="css/xh-lxx-one-img.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-items-img.css" />
		<link rel="stylesheet" href="css/2-书城_tab_PxCook.css" />
	</head>
	<body>
		<div class="page-group">
			<div class="page page-current">
				<!--html代码-->
				<!--标题栏Begin-->
	        	<header class="bar bar-nav">
				  	<a class="icon pull-right">分类</a>
				  	<h1 class="title">
				  		<div class="searchbar">
						    <div class="search-input">
						      <label class="icon icon-search" for="search"></label>
						      <input type="search" id='search' placeholder='请输入检索关键字'/>
						      <a class="icon-scan"></a>
						    </div>
						</div>
				  	</h1>
				</header>
				<!--标题栏 End-->
				<!--主要内容 Begin-->
				<div class="content">
					<!--标签页按钮 Begin-->
					<div class="buttons-tab xh-lxx-top-tab2">
					   <a href="#tab1" class="tab-link active button">栏目</a>
					   <a href="#tab2" class="tab-link button">栏目</a>
					   <a href="#tab3" class="tab-link button">栏目</a>
					   <a href="#tab4" class="tab-link button">栏目</a>
					   <a href="#tab5" class="tab-link button">栏目</a>
					   <a href="#tab6" class="tab-link button">栏目</a>
					   <a href="#tab7" class="tab-link button">栏目</a>
					   <a href="#tab8" class="tab-link button">栏目</a>
					   <a href="#tab9" class="tab-link button">栏目</a>
					</div>
					<!--展开更多按钮-->
				  	<a href="#" class="xh-lxx-top-tab2-more">
				    	<span></span>
				    	<span></span>
				    	<span></span>
				  	</a>
				    <div class="tabs">
				      <!--第一个标签页内容 Begin-->
				        <div id="tab1" class="tab active">
				        	<!--banner-->
				        	<div class="xh-lxx-one-img1">
				        		<a class="banner">
					             <span>BANNER单页</span>
						        </a>
						      	<a href="#" class="btn-share"></a>
				        	</div>
				        	<!--书目类别1 -->
				            <div class="xh-lxx-tab-title6 padding-05">
				        		<h3>书目类别</h3>
				        		<a href="#">
				        			<span class="more">更多</span>
				        			<span class="icon icon-right"></span>
				        		</a>
				        	</div>
				            <!--书目内容1 Begin-->
				            <div class="xh-lxx-tab-content14 padding-05">
							    <a href="#" class="content14 external">
							    	<div class="img">JPG/PNG</div>
							    	<h3>书目名称</h3>
							    </a>
							    <a href="#" class="content14 external">
							    	<div class="img">JPG/PNG</div>
							    	<h3>书目名称</h3>
							    </a>
							    <a href="#" class="content14 external">
							    	<div class="img">JPG/PNG</div>
							    	<h3>书目名称</h3>
							    </a>
							    <a href="#" class="content14 external">
							    	<div class="img">JPG/PNG</div>
							    	<h3>书目名称</h3>
							    </a>
							    <a href="#" class="content14 external">
							    	<div class="img">JPG/PNG</div>
							    	<h3>书目名称</h3>
							    </a>
							    <a href="#" class="content14 external">
							    	<div class="img">JPG/PNG</div>
							    	<h3>书目名称书目名称书目名称</h3>
							    </a>
			      			</div>
				            <!--书目内容1 End-->
				            <!--书目类别2 -->
				            <div class="xh-lxx-tab-title6 padding-05">
				        		<h3>栏目精选</h3>
				        		<a href="#">
				        			<span class="more">更多</span>
				        			<span class="icon icon-right"></span>
				        		</a>
				        	</div>
				        	<div class="content15">
				        		<!--栏目精选内容1  Begin-->
					        	<a class="xh-lxx-tab-content15">
								    <div class="img">
								    	<span>JPG/PNG</span>
								    </div>
								    <div class="content15">
								    	<div class="title-author">
								    		<h3>书目标题名称只显示一行</h3>
								    		<p>作者名称</p>
								    	</div>
								    	<p class="summary">
								    		这里是显示书目内容简介,H+IDE是一个能够大大提升Html页面开发速度的一个模板资源整合开发工具,提升工作效率,值得推广使用!
								    	</p>
								    </div>
				      			</a>
					        	<!--栏目精选内容1 End-->
					        	<!--栏目精选内容2  Begin-->
					        	<a class="xh-lxx-tab-content15">
								    <div class="img">
								    	<span>JPG/PNG</span>
								    </div>
								    <div class="content15">
								    	<div class="title-author">
								    		<h3>书目标题名称只显示一行</h3>
								    		<p>作者名称</p>
								    	</div>
								    	<p class="summary">
								    		这里是显示书目内容简介,H+IDE是一个能够大大提升Html页面开发速度的一个模板资源整合开发工具,提升工作效率,值得推广使用!
								    	</p>
								    </div>
				      			</a>
					        	<!--栏目精选内容2 End-->
					            <!--栏目精选内容3  Begin-->
					        	<a class="xh-lxx-tab-content15">
								    <div class="img">
								    	<span>JPG/PNG</span>
								    </div>
								    <div class="content15">
								    	<div class="title-author">
								    		<h3>书目标题名称只显示一行</h3>
								    		<p>作者名称</p>
								    	</div>
								    	<p class="summary">
								    		这里是显示书目内容简介,H+IDE是一个能够大大提升Html页面开发速度的一个模板资源整合开发工具,提升工作效率,值得推广使用!
								    	</p>
								    </div>
				      			</a>
					        	<!--栏目精选内容3 End-->
				        	</div>
				        	<!--栏目模块1 -->
				            <div class="xh-lxx-tab-title6 padding-05">
				        		<h3>栏目模块1</h3>
				        		<a href="#">
				        			<span class="more">更多</span>
				        			<span class="icon icon-right"></span>
				        		</a>
				        	</div>
				        	<div class="content15">
				        		<!--模块BANNER-->
				        		<div class="banner1 padding-05">
				        			<a class="xh-lxx-one-img">
							            <span>模块BANNER单页</span>
							        </a>
				        		</div>
				        		<!--栏目模块1  Begin-->
					        	<a class="xh-lxx-tab-content15">
								    <div class="img">
								    	<span>JPG/PNG</span>
								    </div>
								    <div class="content15">
								    	<div class="title-author">
								    		<h3>书目标题名称只显示一行</h3>
								    		<p>作者名称</p>
								    	</div>
								    	<p class="summary">
								    		这里是显示书目内容简介,H+IDE是一个能够大大提升Html页面开发速度的一个模板资源整合开发工具,提升工作效率,值得推广使用!
								    	</p>
								    </div>
				      			</a>
					        	<!--栏目模块1 End-->
					        	<!--栏目模块1  Begin-->
					        	<a class="xh-lxx-tab-content15">
								    <div class="img">
								    	<span>JPG/PNG</span>
								    </div>
								    <div class="content15">
								    	<div class="title-author">
								    		<h3>书目标题名称只显示一行</h3>
								    		<p>作者名称</p>
								    	</div>
								    	<p class="summary">
								    		这里是显示书目内容简介,H+IDE是一个能够大大提升Html页面开发速度的一个模板资源整合开发工具,提升工作效率,值得推广使用!
								    	</p>
								    </div>
				      			</a>
					        	<!--栏目模块1 End-->
					            <!--栏目模块1  Begin-->
					        	<a class="xh-lxx-tab-content15">
								    <div class="img">
								    	<span>JPG/PNG</span>
								    </div>
								    <div class="content15">
								    	<div class="title-author">
								    		<h3>书目标题名称只显示一行</h3>
								    		<p>作者名称</p>
								    	</div>
								    	<p class="summary">
								    		这里是显示书目内容简介,H+IDE是一个能够大大提升Html页面开发速度的一个模板资源整合开发工具,提升工作效率,值得推广使用!
								    	</p>
								    </div>
				      			</a>
					        	<!--栏目模块1 End-->
				        	</div>
				        	
				        </div>
					    <!--第一个标签页内容 End-->
					    <div id="tab2" class="tab">
					        <div class="content-block">
					          <p>This is tab 2 content</p>
					        </div>
					    </div>
					    <div id="tab3" class="tab">
					        <div class="content-block">
					          <p>This is tab 3 content</p>
					        </div>
					    </div>
					    <div id="tab4" class="tab">
					        <div class="content-block">
					          <p>This is tab 4 content</p>
					        </div>
					    </div>
					    <div id="tab5" class="tab">
					        <div class="content-block">
					          <p>This is tab 5 content</p>
					        </div>
					    </div>
					    <div id="tab6" class="tab">
					        <div class="content-block">
					          <p>This is tab 6 content</p>
					        </div>
					    </div>
					    <div id="tab7" class="tab">
					        <div class="content-block">
					          <p>This is tab 7 content</p>
					        </div>
					    </div>
					    <div id="tab8" class="tab">
					        <div class="content-block">
					          <p>This is tab 8 content</p>
					        </div>
					    </div>
					    <div id="tab9" class="tab">
					        <div class="content-block">
					          <p>This is tab 9 content</p>
					        </div>
					    </div>
					</div>
				    
				</div>
				<!--主要内容 End-->
				<nav class="bar bar-tab xh-lxx-tab-items-img">
					<a class="tab-item external" href="#">
				        <span class="icon"><img src="img/icon6.png" alt="" /></span>
				        <span class="tab-label">阅读</span>
				    </a>
				    <a class="tab-item external active" href="#">
				        <span class="icon"><img src="img/icon5_a.png" alt="" /></span>
				        <span class="tab-label">书城</span>
				    </a>
				    <a class="tab-item external" href="#">
				        <span class="icon"><img src="img/icon4.png" alt="" /></span>
				        <span class="tab-label">发现</span>
				    </a>
				    <a class="tab-item external" href="#">
				        <span class="icon"><img src="img/icon3.png" alt="" /></span>
				        <span class="tab-label">我的</span>
				    </a>
			    </nav>
			</div>
		</div>
		

		<script src="dist/js/zepto.min.js"></script>
		<script src="dist/js/sm.min.js"></script>
		<script src="dist/js/sm-extend.min.js"></script>
		<script>
			$.init();  //初始化
		</script>
	</body>
</html>
